<template>
    <div>
        <div class="shoppings" v-for="(item) in  ProductDate " :key="item.goods_id" @click="onclick(item.goods_id)">
            <div class="shoppings_left">
                <img :src="item.goods_image" alt="">
            </div>
            <div class="shoppings_right">
                <!-- 商品标签 -->
                <p class="shopping_title">{{ item.goods_name }}</p>
                <!-- 商品出售件数 -->
                <p class="shopping_num">已售{{ item.goods_sales }}件</p>
                <!-- 商品价格 -->
                <p class="hopping_price">
                    <span class="price_new">¥{{ item.goods_price_max }}</span>
                    <del class="price_old" v-show="item.line_price_max !== '0.00'">{{ item.line_price_max }}</del>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import { getProDetails } from '@/api/ProductDetails'
export default {
    props: {
        ProductDate: {
            //数组
            type: Array,
            required: true
        }
    },
    methods: {
        async onclick(goods_id) {
            console.log(goods_id);
            const res = await getProDetails(goods_id);
            console.log("res", res);
            //跳转到商品详情页并传递参数
            this.$router.push({ path: '/productDetails', query: { goods_id: goods_id } });
        }
    }
}
</script>
<style  lang="scss" scoped>
// 商品内容部分 
.shoppings {
    display: flex;
    // padding: 10px;
    background-color: #fff;
    border-bottom: 5px solid #eee;
    // margin-bottom: 20px;

    .shoppings_left {
        width: 40%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .shoppings_right {
        width: 60%;
        padding-left: 10px;

        .shopping_title {
            font-size: 14px;
            color: #333;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 显示两行 */
            -webkit-box-orient: vertical;
        }

        .shopping_num {
            font-size: 12px;
            color: #999;
            margin-top: 10px;
        }

        .hopping_price {
            margin-top: 10px;

            .price_new {
                font-size: 16px;
                color: #b32d19;
                font-weight: bold;
                margin-right: 10px;
            }

            .price_old {
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>